<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆糖个人主页</title>
    <link rel="icon" href="../img/duitang.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/axios.min.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header-wrap">
        <div class="header-fixed">
            <Header class="header">
                <a id="logo" href="index.html">堆糖</a>
                <div class="category">
                    <h6>分类</h6>
                    <span></span>
                    <div>
                        <p>热门推荐</p>
                        <p>超省钱</p>
                        <ul>
                            <li>家居生活</li>
                            <li>美食菜谱</li>
                            <li>手工DIY</li>
                            <li>时尚搭配</li>
                            <li>美妆造型</li>
                            <li>婚纱婚礼</li>
                            <li>文字句子</li>
                            <li>插画绘画</li>
                            <li>影音书籍</li>
                            <li>人物明星</li>
                            <li>植物多肉</li>
                            <li>生活百科</li>
                            <li>搞笑萌宠</li>
                            <li>人文艺术</li>
                            <li>设计</li>
                            <li>古风</li>
                            <li>壁纸</li>
                            <li>旅行</li>
                            <li>头像</li>
                            <li>摄影</li>
                            <li>表情</li>
                            <li>素材</li>
                            <li>动图</li>
                        </ul>
                    </div>
                </div>
                <div class="search">
                    <input id="sea-ipt" type="text" placeholder="搜索感兴趣的内容">
                    <input id="sea-btn" type="button">
                    <ul>
                        <li class="sea-fir">搜索含<span></span>的图片</li>
                        <li>搜索含<span></span>的商品</li>
                        <li>搜索含<span></span>的文章</li>
                        <li>搜索含<span></span>的专辑</li>
                        <li>搜索含<span></span>的达人</li>
                    </ul>
                </div>
                <ul class="header-right">
                    <li id="left">堆糖生活家</li>
                    <li id="slog">注册/登录</li>
                    <img src="../img/tx.jpeg" alt="">
                    <ul>
                        <li><i></i>个人主页</li>
                        <li><i></i>账号设置</li>
                        <li><i></i>退出登录</li>
                    </ul>
                </ul>
            </Header>
        </div>
    </div>
    <!-- 主页面 -->
    <div class="box">
        <!-- 下载App -->
        <div class="download-app">
            <img src="../img/down02.png" alt="加载失败了">
        </div>
        <!-- 核心 -->
        <div class="content">
            <table>
            </table>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer-wrap">
        <footer class="footer">
            <div class="footer-top">

            </div>
            <ul class="footer-bottom">
                <li>沪ICP备10038086号-3</li>
                <li>沪公网安备31010102002072号</li>
                <li>有害内容举报电话：021-63462282</li>
                <li>上海市互联网违法和不良信息举报中心</li>
                <li>网上有害信息举报专区</li>
                <li>自营经营者信息</li>
                <li>增值电信业务经营许可证：沪B2-20180610</li>
                <li>网络文化经营许可证 沪网文〔2020〕1392-114号</li>
                <li>Copyright ©2021 duitang.com 版权所有</li>
            </ul>
        </footer>
    </div>
    <!-- 遮罩 -->
    <div id="mask"></div>
    <!-- 小小登录 -->
    <div id="smlog">
        <div class="title">登录<span></span></div>
        <div class="sm-box">
            <ul class="left">
                <li>
                    <p>手机号:</p>
                    <input class="ipt" type="text">
                </li>
                <li>
                    <p>密码:</p>
                    <input class="ipt" type="text">
                    <a id="forget" href="javascript:;">忘记密码?</a>
                </li>
                <li>
                    <input type="checkbox">
                    <span>记住我</span>
                    <a href="javascript:;">切换至海外手机号登录</a>
                </li>
                <li id="login">登录</li>
                <li class="log">
                    <div>
                        <i></i>
                        <p>QQ登录</p>
                    </div>
                    <div>
                        <i></i>
                        <p>微博登录</p>
                    </div>
                    <div>
                        <i></i>
                        <p>微信登录</p>
                    </div>
                </li>
            </ul>
            <div class="right">
                <img src="../img/down01.png" alt="">
                <p>扫一扫下载手机客户端浏览体验更佳</p>
            </div>
        </div>
        <a href="reg.html">还没有账号？立即注册</a>
    </div>
    <script src="../js/public.js"></script>
    <script>
        let jsonarr
        // 获取当前用户的购物车
        let objarr = []
        axios.get('index.json').then(function (res) {
            let arr = res.data.data.object_list
            arr.forEach(v => {
                objarr.push({
                    id: v.id, // id
                    bt: v.atlas.desc, // 标题
                    ag: v.atlas.like_count, // 点赞
                    st: v.atlas.favorite_count, // 收藏
                })
            });
            load()
        })

        function load() {
            let userObj
            let jsonStr = localStorage.getItem('duitang')
            if (jsonStr != 'null' && jsonStr != '[]') {
                userObj = JSON.parse(jsonStr)
                if (isJson()) {
                    let arr = jsonarr[0].pname.split('$')
                    if (arr.length == 1) {
                        alert('您还没有点赞')
                        location.href = 'index.html'
                    } else {
                        let newarr = objarr.filter(v => {
                            if (arr.some(s => s == v.id)) {
                                return v
                            }
                        })
                        let newstr = newarr.map(v => `
                        <tr data-id="${v.id}">
                            <td><input class="che" type="checkbox"></td>
                            <td><img src="../img/tx.jpeg" alt=""></td>
                            <td>${v.bt}</td>
                            <td class="price">${v.ag}</td>
                            <td>
                                <div class="sub">-</div>
                                <input class="nums" type="text" value="1">
                                <div class="add">+</div>
                            </td>
                            <td class="del">删除</td>
                        </tr>`)
                        newstr.unshift(`
                        <tr>
                            <th>全选</th>
                            <th>图片</th>
                            <th>简介</th>
                            <th>点赞(单价)</th>
                            <th>次数(数量)</th>
                        </tr>`)
                        newstr.push(`
                        <tr>
                            <td><input type="checkbox" id="allcheck"></td>
                            <td></td>
                            <td></td>
                            <td id="allag">总点赞(总价)</td>
                            <td id="allnm">总次数(总数)</td>
                            <td></td>
                        </tr>`)
                        $('table').html(newstr.join(''))
                        total()
                    }
                } else {
                    oplogin()
                }
            } else {
                oplogin()
            }
        }
        // 输入框
        let str
        $('table').on('focus', '.nums', function () {
            str = $(this).val()
            console.log(str);
        })
        $('table').on('change', '.nums', function () {
            if (isNaN($(this).val())) {
                $(this).val(str)
                alert('请输入正确的数字')
            } else if (Number($(this).val()) <= 0) {
                $(this).val(str)
                alert('请输入大于0的数字')
            } else {
                total()
            }
        })
        // 添加
        $('table').on('click', '.add', function () {
            let number = Number($(this).prev().val())
            $(this).prev().val(number + 1)
            total()
        })
        // 减少
        $('table').on('click', '.sub', function () {
            let number = Number($(this).next().val())
            console.log(number);
            if (number == 1) {
                alert('不能再减少了')
            } else {
                $(this).next().val(number - 1)
                total()
            }
        })
        // 删除的点击事件
        $('table').on('click', '.del', function () {
            let isdel = confirm('确认删除')
            if (isdel) {
                let id = $(this).parent().data('id')
                update(id, 0, isdel)
                console.log($('table tr').length);
                $(this).parent().remove()
                if ($('table tr').length == 2) { // 没有了
                    $('table').css('display', 'none')
                }
                setTimeout(function () {
                    load()
                }, 500)
            }
        })
        // 删除的显示与消失
        $('table').on('mouseenter', 'tr', function () {
            $(this).find('td:last').css('display', 'block')
        })
        $('table').on('mouseleave', 'tr', function () {
            $(this).find('td:last').css('display', 'none')
        })
        // 单选多选
        $('table').on('change', '.che', function () {
            total()
        })
        $('table').on('change', '#allcheck', function () {
            if ($(this).prop('checked')) {
                $('table .che').prop('checked', true)
            } else {
                $('table .che').prop('checked', false)
            }
            total()
        })
        // 计算总价
        total()
        function total() {
            let allag = 0
            let allnm = 0
            for (let i = 0; i < $('table tr').length - 2; i++) {
                let pri = $('table .price').eq(i).text()
                let num = $('table .nums').eq(i).val()
                if ($('table .che').eq(i).prop('checked')) {
                    allag += num * pri
                    allnm += Number(num)
                }
            }
            $('#allag').text(allag)
            $('#allnm').text(allnm)
        }

        function isJson() {
            jsonarr = JSON.parse(localStorage.getItem('dt_data'))
            if (jsonarr != null && jsonarr.length != 0) {
                return true
            } else {
                return false
            }
        }
    </script>
</body>

</html>